<template>
	<view>
		
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="领用申请" color="#fff" @leftClick="leftClick">
		  <fui-icon color="#fff" name="arrowleft"></fui-icon>
		</fui-nav-bar>
		
		<scroll-view scroll-y="true" style="height: 100vh;padding-bottom:230rpx;">
			<view class="warp">
			  <view class="nav">
			    <view class="port">
			      <view class="title">
			        <fui-section :padding="['0', '20rpx']" title="领用信息" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
			      </view>
			      <view class="li">
							<fui-input label="领用单号"  v-model="info.code"  label-size="30rpx" borderTop placeholder="系统自动生成" disabled placeholder-style="font-size: 27rpx;"></fui-input>
			      </view>
			      <view class="li">
			        <fui-input label="领用主题"  v-model="info.title"  label-size="30rpx" borderTop placeholder="请输入领用主题" placeholder-style="font-size: 27rpx;"></fui-input>
			      </view>
			      <view class="li">
			       <fui-input v-model="info.time" label="申请时间" label-size="30rpx" :bottomLeft="0" placeholder="请选择申请时间" placeholder-style="font-size: 27rpx;">
			         <fui-icon :size="30" name="arrowright" @click="showC = true"></fui-icon>
			       </fui-input>
			      </view>
						<view class="li">
						 <fui-input v-model="info.warehouseName" label="仓库名称" :bottomLeft="0" placeholder="请选择仓库名称" label-size="30rpx" placeholder-style="font-size: 27rpx;">
						   <fui-icon :size="30" name="arrowright" @click="showF = true"></fui-icon>
						 </fui-input>
						</view>
			      <view class="li">
			       <fui-input v-model="info.requisitionType" label="领用类型" :bottomLeft="0" placeholder="请选择领用类型" label-size="30rpx" placeholder-style="font-size: 27rpx;">
			         <fui-icon :size="30" name="arrowright" @click="show = true"></fui-icon>
			       </fui-input>
			      </view>
			      <view class="li">
			        <fui-input v-model="info.reason" label="领用原因" :bottomLeft="0" placeholder="请选择领用原因" label-size="30rpx"  placeholder-style="font-size: 27rpx;">
			          <fui-icon :size="30" name="arrowright" @click="showA = true"></fui-icon>
			        </fui-input>
			      </view>
						<view class="li">
						  <fui-input v-model="info.workOrderType" label="工单类型" :bottomLeft="0" placeholder="请选择工单类型" label-size="30rpx"  placeholder-style="font-size: 27rpx;">
						    <fui-icon :size="30" name="arrowright" @click="showD = true"></fui-icon>
						  </fui-input>
						</view>
						<view class="li">
						  <fui-input v-model="info.aboutWorkOrder" label="关联工单" :bottomLeft="0" placeholder="请选择关联工单" label-size="30rpx"  placeholder-style="font-size: 27rpx;">
						    <fui-icon :size="30" name="arrowright" @click="showE = true"></fui-icon>
						  </fui-input>
						</view>
						<view class="li">
						  <fui-input label="领用申请人"  v-model="info.userName"  label-size="30rpx" borderTop placeholder="填写领用申请人" disabled placeholder-style="font-size: 27rpx;"></fui-input>
						</view>
						<view class="li">
						  <fui-input label="所在部门"  v-model="info.department"  label-size="30rpx" borderTop placeholder="填写所在部门" disabled placeholder-style="font-size: 27rpx;"></fui-input>
						</view>
						<view class="li">
						  <fui-input v-model="info.sparePart" label="申请备件" :bottomLeft="0" placeholder="请选择申请备件" label-size="30rpx"  placeholder-style="font-size: 27rpx;">
						    <fui-icon :size="30" name="arrowright" @click="showH"></fui-icon>
						  </fui-input>
						</view>
						<view class="li">
							 <view class="title1">
								备  注
							 </view>
						</view>
						<u--textarea class="remarks" v-model="info.remarks" placeholder="请输入备注"  border="none"  ></u--textarea>
						
						<view class="title2" >
						  <fui-section :padding="['0', '20rpx']" title="设备信息" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
						</view>
						
						
						<view class="port1">
							<view class="li">
							  <view class="left">关联设备</view>
								<view class="changeSwitch">
									<u-switch v-model="switchOpen" @change="changeSwitch"></u-switch>
								</view>
							</view>
							<view class="li">
								<view class="left">设备名称</view>
								<fui-input v-model="info.sparePart" :bottomLeft="0" placeholder="请选择设备名称" placeholder-style="font-size: 27rpx;">
									<fui-icon :size="40" name="scan"  color="#2979ff" @click="showx"></fui-icon>
								</fui-input>
							</view>
							<view class="" v-if="switchOpen">
								<view class="li">
								  <view class="left">设备编号</view>
								  <view class="right">设备编号</view>
								</view>
								<view class="li">
								  <view class="left">规格型号</view>
								  <view class="right">规格型号</view>
								</view>
								<view class="li">
								  <view class="left">设备类型</view>
								  <view class="right">设备类型</view>
								</view>
								<view class="li">
								  <view class="left">存放位置</view>
								  <view class="right">存放位置</view>
								</view>
								<view class="li">
								  <view class="left">使用部门</view>
								  <view class="right">使用部门</view>
								</view>
							</view>
						</view>
						
						
						<view class="title2" style="display: flex;">
						  <fui-section :padding="['0', '20rpx']" title="关联文件" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
							<fui-icon style="position: absolute;right: 30rpx;" :size="35" name="close"  color="#000000" @click="del"></fui-icon>
						</view>
						
						<view class="document">
						  <view class="debris" v-for="v of 4">
						    <image class="img" src="/static/images/my/my-Profile.png" mode=""></image>
						    <view class="">文档.pdf</view>
								<fui-icon style="position: absolute;right: 30rpx;" :size="35" name="close"  color="#000000" @click="del"></fui-icon>
						  </view>
						</view>
						
						<view class="footer" @click="clickBtn">
						  <view class="recall">提交</view>
						</view>
						
			    </view>
			  </view>
			  
			</view>
		</scroll-view>
		
		
		<fui-picker :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
		<fui-picker :options="optionsA" :show="showA" @change="changeA" @cancel="cancelA"></fui-picker>
		<fui-picker :options="optionsB" :show="showD" @change="changeD" @cancel="cancelD"></fui-picker>
		<fui-picker :options="optionsE" :show="showE" @change="changeE" @cancel="cancelE"></fui-picker>
			<fui-picker :options="optionsF" :show="showF" @change="changeF" @cancel="cancelF"></fui-picker>
		<up-calendar :show="showC" :mode="mode" @confirm="confirmC" @close="showC = false"></up-calendar>
		
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue'
const leftClick = () => {
	uni.navigateBack()
}
const switchOpen = ref(true);

let info = reactive({
	code:'',
	title:'',
	time:'',
	warehouseName:'',
	requisitionType:'',
	reason:'',
	workOrderType:'',
	aboutWorkOrder:'',
	userName:'',
	department:'',
	sparePart:'',
	remarks:''
})

const changeSwitch = (e) => { 
	switchOpen.value = e
}
const clickBtn = (e) => { 
	console.log('提交');
}

const showC = ref(false);
const confirmC = (e) => {
  info.time = e['0'];
  console.log(e, '555');
  showC.value = false;
};

const show = ref(false);
const emergency = ref('');
const options = ref(['领用类型1', '领用类型2', '领用类型3', '领用类型4']);
const showA = ref(false);

const audit = ref('');
const optionsA = ref(['领用原因1', '领用原因2', '领用原因3', '领用原因4']);

const showD = ref(false);
const audit1 = ref('');
const optionsB = ref(['工单类型1', '工单类型2', '工单类型3', '工单类型4']);

const showE = ref(false);
const audit2 = ref('');
const optionsE = ref([ '关联工单1', '关联工单2', '关联工单3', '关联工单4']);

const showF = ref(false);
const audit3 = ref('');
const optionsF = ref(['仓库名称1', '仓库名称2', '仓库名称3', '仓库名称4']);

const change = (e) => {
  show.value = false;
  info.requisitionType = e.value;
  console.log(e, '5656');
};
const changeA = (e) => {
  info.reason = e.value;
  showA.value = false;
  console.log(e);
};
const changeD = (e) => {
  info.workOrderType = e.value;
  showD.value = false;
  console.log(e);
};

const changeE = (e) => {
  info.aboutWorkOrder = e.value;
  showE.value = false;
  console.log(e);
};

const changeF = (e) => {
  info.warehouseName = e.value;
  showF.value = false;
  console.log(e);
};

const cancel = () => {
  show.value = false;
};
const cancelA = () => {
  showA.value = false;
};
const cancelD = () => {
  showD.value = false;
};
const cancelE = () => {
  showE.value = false;
};
const cancelF = () => {
  showF.value = false;
};

const showH = () => {
	uni.navigateTo({
		url:'/subpkg_sparePart/addSparePart/addSparePart'
	})
}

</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
	background-color: #f6f6f6;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}

.port1{
	padding-left: 30rpx;
	background-color: #fff;
}

.port {
  .title {
    height: 70rpx;
    display: flex;
    align-items: center;
		background-color: #fff;
  }
	.title2{
		margin-top: 20rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}
	.document {
	  .debris {
	    display: flex;
	    align-items: center;
	    height: 100rpx;
			background-color: #fff;
	    .img {
	      width: 60rpx;
	      height: 60rpx;
	      margin: 0 30rpx;
	    }
	  }
	}
  .li {
    display: flex;
    align-items: center;
    height: 100rpx;
		background-color: #fff;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
		.changeSwitch{
			margin-left: 30rpx;
		}
		.title1{
			margin-left: 30rpx;
			font-size: 28rpx;
			background-color: #fff;
		}
  }
	.remarks{
		padding-left: 40rpx;
	}
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
		
    .described {
      padding-right: 50rpx;
    }
  }
}

.statusType{
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	border: 1rpx solid #0052d9;
	color: #0052d9;
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
	margin-top: 20rpx;
  .nav {
    // background-color: #fff;
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #ffffff;
  }
	.recall2{
		width: 40%;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
	}
	.recall3{
		width: 40%;
		background-color: #0052d9;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		color: #ffffff;
	}
}
</style>
